<script>
  import $ from '../dfish.js'
  import {
    mergeProps
  } from 'vue'
  import Scroll from './Scroll.vue'
  import PubParent from './PubParent.vue'


  export default {
    name: 'w-tree',
    mixins: [Scroll, PubParent],
    provide() {
      return {
        provideLeafLevel: -1,
        provideParentLeaf: null,
      }
    },
    methods: {
      getCurrent() {
        const leaf = $.q('.w-leaf.z-on', this.el())[0]
        return leaf && $(leaf)
      },
      html_slots() {
        return this.html_scroll_slots()
      }
    },
    computed: {
      html_props() {
        return {
          class: this.html_scroll_class
        }
      }
    }
  }
</script>

<style>
  .w-tree {
    text-align: left;
    box-sizing: border-box;
  }

  .w-leaf.z-hv {
    background: #f5faff
  }

  .w-leaf.z-on {
    background: var(--w--focus-color);
    color: #fff
  }
</style>
